<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DataPresentation with Series Demo</title>

<style type="text/css">
@import "script/dojo-1.4.3/dojo/resources/dojo.css";
@import "script/dojo-1.4.3/dijit/themes/tundra/tundra.css";

@import "script/dojo-1.4.3/dojox/layout/resources/FloatingPane.css";
@import "script/dojo-1.4.3/dojox/layout/resources/ResizeHandle.css";

@import "script/dojo-1.4.3/dojox/grid/resources/Grid.css";
@import "script/dojo-1.4.3/dojox/grid/resources/tundraGrid.css";
body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#debugPanel pre {
    font-family: "Lucida Console", "Courier New", Courier, monospace;
}

div.container {
    border: 0px solid green;
    margin: 10px;
}
</style>

<script type="text/javascript">
var djConfig = {
    isDebug: true,
    parseOnLoad: true,
    locale: "zh",
    extraLocale: ["en"]
};
</script>
<script type="text/javascript" src="script/dojo-1.4.3/dojo/dojo.js"></script>
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.date.locale");
    dojo.require("dojo.parser");

    dojo.require("dijit.Dialog");
    dojo.require("dijit.form.CheckBox");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.DropDownButton");
    dojo.require("dijit.form.FilteringSelect");
    dojo.require("dijit.form.NumberSpinner");
    dojo.require("dijit.form.RadioButton");
    dojo.require("dijit.form.SimpleTextarea");
    dojo.require("dijit.form.Textarea");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.Menu");
    dojo.require("dijit.TitlePane");
    dojo.require("dijit.TooltipDialog");

    dojo.require("dojox.html.entities");
    dojo.require("dojox.layout.FloatingPane");
    dojo.require("dojox.layout.ResizeHandle");
    dojo.require("dojox.widget.Standby");

    dojo.require("dojox.widget.DataPresentation");
</script>
<script type="text/javascript" src="script/utils.js"></script>
<script type="text/javascript">
function debug(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);
    console.debug(msg);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML = msg;
}

function append(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML += "\n" + msg;
}

function show(id) {
    demo.utils.show(id);
}

function hide(id) {
    demo.utils.hide(id);
}
</script>
<style type="text/css">
@import "css/rounded-button.css";
@import "css/rounded-corners.css";

body {
    padding: 10px;
}

.dojoxLegendNode {
    border: 1px solid #CCCCCC;
    margin: 5px auto;
    padding: 2px;
}

.smallTextCentered {
    font-size: x-small;
    text-align: center;
}

.confidential {
    color: #AA0000;
    font-weight:  bold;
}

</style>
<script type="text/javascript">
var GlobalVariables = {
    "contextURL": null,
    "identifier": "moniker",
    "dp": null
};

function insertToArray(item, array, insertToFirst) {
    demo.utils.insertToArray(item, array, insertToFirst);
}

var smd = {
    overview: {}
};

/**
 * Used to display null values as zeros in grid
 */
smd.overview.formatNullToZero = function(value, rowIndex) {
    var html = value;
    if (value === null || value === undefined) {
        html = "null";
    }

    return html;
};

/**
 * Used to style Criteria field in ICAR grid
 */
smd.overview.formatIcarCriteria = function(value, rowIndex) {
    var driverColorColumnIndex = 9;

    if (this.name === "Criteria") {
        var store = this.grid.store;
        var item = this.grid.getItem(rowIndex);
        if (item) {
            var driverColour = store.getValue(item, "data." + driverColorColumnIndex);
            //console.debug("driverColour", driverColour);
            if (driverColour) {
                this.customStyles.push("background:" + driverColour +"; ");
            }
        }
        var html = '<div title="' + value + '" class="text-oneline">' + value + '</div>';
    }

    return value;
};

/**
 * Used to style flags in ICAR grid
 */
smd.overview.formatIcarFlag = function(value, rowIndex) {
    // value mapping:
    // null    -> "n/a", smd-cell-notapplicable
    // -1      -> "n/a", smd-cell-notapplicable
    // 0       -> "",    smd-cell-pass
    // 1       -> "x",   smd-cell-fail
    var html = "";

    if (value === null || value === undefined) {
        this.customStyles.push("background: #eeeeee; color: #aaaaaa; ");
        html = "n/a";
        return html + "("+value+")";
    }

    var value = Math.floor(value);
    switch (value) {
        case -1:
            this.customStyles.push("background: #eeeeee; color: #aaaaaa; ");
            html = "n/a";
            break;
        case 0:
            html = "";
            break;
        case 1:
            this.customStyles.push("background: red; font-weight:bold; ");
            html = "X";
    }

    return html + "("+value+")";
};

/**
 * Used to style flags in ICAR grid
 */
smd.overview.formatIcarInterop = function(value, rowIndex) {
    // value mapping:
    // null    -> "n/a", smd-cell-notapplicable
    // 0       -> "",    smd-cell-pass
    // default -> "x",   smd-cell-fail
    var html = "";

    if (value === null || value === undefined) {
        this.customStyles.push("background: #eeeeee; color: #aaaaaa; ");
        html = "n/a";
        return html + "("+value+")";
    }

    var value = Math.floor(value);
    switch (value) {
        case 0: 
            html = "";
            break;
        default:
            this.customStyles.push("background: red; font-weight:bold; ");
            html = "X";
    }

    return html + "("+value+")";
};

/**
 * Used to style top 5 in ICAR grid
 */
smd.overview.formatIcarTop5 = function(value, rowIndex) {
    // pattern = "{0,choice,0<1|5<0}"
    // "0<1": if x > 0, then output = 1
    // "5<0": if x > 5, then output = 0
    // In summary, if x = [1,5], then output = 1

    // string mapping:
    // null    -> "n/a", smd-cell-notapplicable
    // [1,5]   -> "x",   smd-cell-fail
    // >5      -> "",    smd-cell-pass
    // default -> "n/a", smd-cell-notapplicable
    
    var html = "";

    if (value === null || value === undefined) {
        // null -> "n/a", smd-cell-notapplicable
        this.customStyles.push("text-align:center; background: #eeeeee; color: #aaaaaa; ");
        html = "n/a";
        return html + "("+value+")";
    }

    var value = Math.floor(value);

    if (value >= 1 && value <= 5) {
        // 1       -> "x",   smd-cell-fail
        this.customStyles.push("background: red; text-align:center; font-weight:bold; ");
        html = "X";
    } else if (value > 5) {
        // 0       -> "",    smd-cell-pass
        html = "";
    } else {
        // default -> "n/a", smd-cell-notapplicable
        this.customStyles.push("text-align:center; background: #eeeeee; color: #aaaaaa; ");
        html = "n/a";
    }

    return html + "("+value+")";
};

function getChart(configuration) {

    var chartType = null;
    var type = configuration.type || "bars";

    switch (type.toLowerCase()) {
        case 'hybrid3':
            chartType = "Hybrid";
            // add right y axis
            //chart.addAxis("y2",{vertical:true,fixLower:"major",fixUpper:"major",natural:true,min:0, leftBottom: false});
            break;
        case 'hybrid':
            chartType = "Hybrid";
            break;
        case 'clusteredcolumns':
            chartType = "ClusteredColumns";
            //chart.addAxis("y",{vertical:true,fixLower:"major",fixUpper:"major",natural:true,min:0});
            //chart.addAxis("x",{vertical:false,labels:labels,min:0,max:range.length+1,majorTickStep:1,minorTickStep:1});
            //chart.addPlot("default",{type:"ClusteredColumns",gap:4});
            break;
        case 'clusteredbars':
            chartType = "ClusteredBars";
            //chart.addAxis("x",{fixLower:"major",fixUpper:"major",natural:true,min:0});
            //chart.addAxis("y",{vertical:true,labels:labels,min:0,max:range.length+1,majorTickStep:1,minorTickStep:1});
            //chart.addPlot("default",{type:"ClusteredBars",gap:4});
            break;
        case 'areas':
            chartType = "Areas";
            //chart.addAxis("y",{vertical:true,fixLower:"major",fixUpper:"major",max:maxval,min:minval,majorTickStep:mts});
            //chart.addAxis("x",{vertical:false,labels:labels,min:1,max:range.length,majorTickStep:1,minorTickStep:1});
            //chart.addPlot("default",{type:"Areas",lines:true,areas:true,markers:false});
            break;
        case 'hybrid2':
            //chart.addAxis("y2",{vertical:true,fixLower:"major",fixUpper:"major",natural:true,min:0, leftBottom: false});
            // intentional drop-through
            chartType = "Hybrid";
            break;
        case 'stackedcolumns':
            chartType = "StackedColumns";
            //chart.addAxis("y",{vertical:true,fixLower:"major",fixUpper:"major"});
            //chart.addAxis("x",{vertical:false,labels:labels,min:0,max:range.length+1,majorTickStep:1,minorTickStep:1});
            //chart.addPlot("default",{type:"StackedColumns",gap:4});
            break;
        case 'stackedbars':
            chartType = "StackedBars";
            //chart.addAxis("x",{fixLower:"major",fixUpper:"minor",natural:true,min:0});
            //chart.addAxis("y",{vertical:true,labels:labels,min:0,max:range.length+1,majorTickStep:1,minorTickStep:1});
            //chart.addPlot("default",{type:"StackedBars",gap:4});
            break;
        case 'stackedareas':
            chartType = "StackedAreas";
            //chart.addAxis("y",{vertical:true,fixLower:"major",fixUpper:"major"});
            //chart.addAxis("x",{vertical:false,labels:labels,min:1,max:range.length,majorTickStep:1,minorTickStep:1});
            //chart.addPlot("default",{type:"StackedAreas",lines:true,areas:true,markers:false});
            break;
        case 'lines':
            chartType = "Lines";
            //chart.addAxis("y",{vertical:true,fixLower:"major",fixUpper:"major",max:maxval,min:minval,majorTickStep:mts});
            //chart.addAxis("x",{vertical:false,labels:labels,min:1,max:range.length,majorTickStep:1,minorTickStep:1});
            //chart.addPlot("default",{type:"Lines",markers:true});
            break;
        case 'bars':
            chartType = "Bars";
            break;
       
    }


    var params = {
        animate: true
    };

    var mode = null;
    if (configuration.chart && configuration.grid) {
        mode = "all";
    } else if (configuration.chart && !configuration.grid) {
        mode = "chart";
    } else if (!configuration.chart && configuration.grid) {
        mode = "grid";
    }

    var metaName = configuration.data.metadata.name;

    var domNode = null;

    switch (mode) {
        case "all":
            // fall-through
        case "chart":
            domNode = configuration.chart;
            params.type = "chart";

            // chart height
            var chartHeight = calcChartHeight(configuration);
            console.debug("chartHeight", chartHeight);
            dojo.style(domNode, "height", chartHeight + "px");
            break;
        case "grid":
            domNode = configuration.grid;
            params.type = "grid";
            // chart height
            dojo.style("chart_div", "height", "0");
            break;
    }

    // overview
    overview(configuration.data);

    // setup series
    var series = makeSeries(configuration, mode);
    params.series = series;

    // setup data
    var data = makedata(configuration, series);
    params.data = data;

    // setup title
    if (configuration.title) {
        params.titleNode = configuration.title;
    }

    // setup footer
    if (configuration.footer) {
        params.footerNode = configuration.footer;
    }

    // setup legend
    if (configuration.legend) {
        var legendWidget = dijit.byId(configuration.legend);
        if (legendWidget) {
            legendWidget.destroy(true);
        }
        params.legendNode = configuration.legend;
        params.legendVertical = configuration.legendvertical || false;
    }

    // setup reverse
    if ("reverse" in configuration) {
        params.reverse = configuration.reverse || false;
    }

    // setup chart
    if (configuration.chart) {
        params.type = "chart";
        params.chartType = chartType;

        // setup labelMod
        if (metaName === "nci_i") {
            params.labelMod = 2;
            console.debug("labelMod", params.labelMod);
        }
    }

    // setup grid
    if (configuration.grid) {
        var gridWidget = dijit.byId(configuration.grid);
        if (gridWidget) {
            gridWidget.destroy(true);
        }
        gridWidget = new dojox.grid.DataGrid({
            autoHeight: 60
        }, configuration.grid);
        params.gridNode = configuration.grid;
        params.gridWidget = gridWidget;
    }

    // override chart fill colors if provided in configuration
    if (configuration.fillColors) {
        var colors = dojo.clone(configuration.fillColors);
        var nColors = colors.length;

        // adjust colors
        if (configuration.colorAdjust) {
            if (params.chartType === "Hybrid") {

                // calculate count
                var nPlots = 0;
                var nLinePlots = 0;

                dojo.forEach(params.series, function(series, index) {
                    if (series.chart !== false) {
                        nPlots++;

                        if (series.charttype === "line") {
                            nLinePlots++;
                        }
                    }
                });

                // calculate colors for lines
                var colorStartIndex = (nPlots - nLinePlots) % nColors;
                var colorIndexArray = [];
                for (var i = 0; i < nLinePlots; i++) {
                    var colorCurrentIndex = (colorStartIndex + i) % nColors;
                    colorIndexArray.push(colorCurrentIndex);
                }

                // adjust colors
                console.debug(colorIndexArray); // [6, 7, 8]
                var colorIndexReversedArray = dojo.clone(colorIndexArray);
                colorIndexReversedArray.reverse(); // [8, 7, 6]
                for (var i = 0; i < colorIndexArray.length; i++) {
                    var colorIndex = colorIndexArray[i];
                    var adjustedColorIndex = colorIndexReversedArray[i];
                    colors[colorIndex] = configuration.fillColors[adjustedColorIndex]; // adjust color order
                }
            }
        }

        // apply to theme
        var theme = new dojox.charting.Theme({colors: colors});
        params.theme = theme;
    }

    // metadata
    var metadata = configuration.data.metadata.description;
    formatMetadata(dojo.byId("metadata_div"), metadata);

    var dp = new dojox.widget.DataPresentation(domNode, params);

    // set axis min value to 0.
    var chart = dp.chartWidget;
    if (chart) {
        refreshChart(chart);
    }

    return dp;
}

dojo.addOnLoad(function() {
    debug("loaded");

    dojo.connect(dijit.byId("selector"), "onChange", function(value) {
        debug("metrics:", value);
        var url = "./data/chart/" + value + ".json";

        dojo.xhrGet({
            url: url,
            handleAs: "json",
            load: function(configuration) {
                console.debug(configuration);

                var dp = GlobalVariables.dp;
                if (dp) {
                    dp.destroy();
                }

                GlobalVariables.dp = getChart(configuration);
                console.debug("dp", GlobalVariables.dp);
            }
        });
    });

    dojo.connect(dijit.byId("spinner"), "onChange", function(value) {
        var width = Math.floor(value);

        dojo.style("datapresentation", "width", width + "px");
        refreshDP();
    });
});

/**
 * Format metadata description items node = div node to contain formatted
 * metadata metadata = list of metadata description items array
 */
function formatMetadata(node, metadata) {
    // clear old metadata content
    dojo.empty(node);

    var description = dojo.create("table", { "align" : "center" });
    var tbody = dojo.create("tbody", null, description); 

    dojo.forEach(metadata, function(item) {
        if (item.name) {
            var tr = dojo.create("tr", null, tbody); 
            var td = dojo.create("td", { align: "right", innerHTML: item.name }, tr);
            dojo.addClass(td, "dojoxLegendText");
            var td2 = dojo.create("td", { innerHTML: ":" }, tr);
            dojo.addClass(td2, "dojoxLegendText");
            var td3 = dojo.create("td", { innerHTML: item.value }, tr);
            dojo.addClass(td3, "dojoxLegendText");
        }
    });

    node.appendChild(description);
}

function refreshDP() {
    var dp = GlobalVariables.dp;
    if (dp) {
        dp.refresh();
        if (dp.chartWidget) {
            refreshChart(dp.chartWidget);
        }
    }
}

function refreshChart(chart) {
    if (!chart) {
        return;
    }
    dojo.style("chart_div", "width", "100%");
    chart.resize();
    setAxisMinValue(chart, 0);
}

// set axis min value.
function setAxisMinValue(chart, minValue) {
    if (!chart) {
        return;
    }

    var min = Math.floor(minValue);
    var axisNames = ["primary", "secondary"];

    dojo.forEach(axisNames, function(axisName) {
        var axis = chart.getAxis("dependent-" + axisName);
        dojo.mixin(axis.opt, {min: min});
    });

    chart._makeDirty();
    chart.render();
}

function calcChartHeight(configuration) {
    var chartHeight = 0;

    if (configuration.data.metadata.name === "nci_i") {
        chartHeight = 300;
        return chartHeight;
    }

    if (configuration.data.range.length > 5) {
        chartHeight = 20 * (configuration.data.range.length - 5) + 200;
        return chartHeight;
    }

    chartHeight = 300;
    return chartHeight;
}

function makeSeries(configuration, mode) {
    var data = configuration.data;
    var range = configuration.range;
    var metaName = data.metadata.name;
    var type = configuration.type;
    var seriesSettings = configuration.series;

    var lineSeries = [];
    var normalSeries = [];

    dojo.forEach(seriesSettings, function(seriesSetting, index) {
        if (seriesSetting.chart === false && seriesSetting.grid === false) {
            return;
        }

        var datapoints = "series[" + index + "].values";
        var namefield = "series[" + index + "].legend";
        var newSeries = {
            datapoints: datapoints,
            namefield: namefield
        };

        if (seriesSetting.chart === false) {
            newSeries.chart = false;
        }

        if (seriesSetting.grid === false) {
            newSeries.grid = false;
        }

        if (seriesSetting.line === true) {
            newSeries.charttype = "line";
            newSeries.axis = "secondary";
        } else {
            if (type === "hybrid2") {
                newSeries.charttype = "stackedcolumns";
            }
        }

        if ("formatter" in seriesSetting) {
            newSeries.gridformatter = seriesSetting.formatter;
        }

        if ("styles" in seriesSetting) {
            newSeries.gridstyles = seriesSetting.styles;
        }

        if (newSeries.charttype === "line") {
            lineSeries.push(newSeries);
        } else {
            normalSeries.push(newSeries);
        }
    });

    var series = [].concat(lineSeries, normalSeries);

    // add range series to first
    var rangeSeries = null;
    if (data.range) {
        rangeSeries = {datapoints: "range", name: range.name, type: "range", chart: false};
        if (metaName === "uia_c") {
            rangeSeries.gridformatter = smd.overview.formatIcarCriteria;
        }

        series.unshift(rangeSeries);
    }

    console.debug("series", series);
    return series;
}

function makedata(configuration, seriesArray) {
    var seriesIndexes = [];
    var seriesIndexesToProcess = [];

    dojo.forEach(seriesArray, function(series) {
        var datapoints = series.datapoints;
        var results = datapoints.match(/^series\[(\d+)\].values$/);
        if (dojo.isArray(results) && results.length === 2) {
            var seriesIndex = results[1];
            seriesIndexes.push(seriesIndex);

            if (series.chart !== false && series.charttype !== "line") {
                seriesIndexesToProcess.push(seriesIndex);
            }
        }
    });

    // hacks to get around null values causing problems in the chart
    var data = configuration.data;
    var metaName = data.metadata.name;

    // special cases for uia_c
    if (metaName === "uia_c") {
        return data;
    }

    dojo.forEach(seriesIndexesToProcess, function(seriesIndex) {
        var values = [];
        if (data.series[seriesIndex]) {
            values = data.series[seriesIndex].values;
        }

        dojo.forEach(values, function(value, index, values) {
            if (value === null) {
                values[index] = 0;
            }
        });
    });

    return data;
}
</script>
<script type="text/javascript">
function contains(array, value) {
    var result = dojo.some(array, function(item) {
        return item === value;
    });

    return result;
}


function overview(data) {
    var chartappend = true;
    var gridappend = true;
    var series = [];
    var colours = [];
    var colourscheme;
    var range = "";
    var hasSplitBy = false;
    var CCcheck = false;
    var nCCcheck = false;
    var percentagepass = true;
    var IIWcheck = false;
    var productView = false; // check if the bookmarked view is a product view
    var mcomp = false; // specical case for metric comparison charts
    var datalength = data.metadata.columns.length;
    var percentagetype = new Array(0);
    var quantitytype = new Array(0);
    var cumulativecounts = new Array(0);
    var regcounts = new Array(0);
    var griddisplay = new Array(0);
    var ncumulativecounts = new Array(0);
    
    if (data.range) {
        var nototal = true;
        var chartheight;
        if (data.range.length > 5) {
            chartheight = nototal ? 35 * (data.range.length - 5) + 200 : 20 * (data.range.length - 5) + 200;
        } else {
            chartheight = nototal ? 300 : 200;
        }
        
        // chartheight=(chartheight>1000) ? 1000: chartheight;
        chartheight = chartheight.toString() + "px";
    }
    
    //dojo.style(chartNode, "height", chartheight);
    for (i = 0; i < datalength; i++) {
        var column = data.metadata.columns[i];
        if (column.type == "independent-label") {
            range = column.title;
            if (column.name == "product-description") 
                productView = true;
            if (column.name == "consumability-attribute") 
                productView = true;
        }
        
        if ((column.type == "quantity") && (column.name != 'average-response-time')) 
            // special case for call response time met
            quantitytype.push(column.title);
        
        if ((column.type == "subset-percentage") && percentagepass) 
            percentagetype.push(column.title);
        
        // special cases for OPC
        if (percentagepass && (column["column-type"] == "COLLATERAL") && (column.title != "Sev 3&4") && (data.metadata.name.match("^pco") != "pco") && (data.metadata.name.match("^pcc") != "pcc")) 
            cumulativecounts.push(column.title);
        
        // special cases for apars backlog and receipts
        if ((column.type == "count") && (column.title != "Backlog goal") && (column.title != "Receipts goal") && (column.title != "Backlog Index")) {
        
            if (CCcheck) {
                if ((column["column-type"] == "COLLATERAL") && (column.title != "Sev 3&4")) 
                    regcounts.push(column.title);
                // special case for cumulative counts
            } else 
                regcounts.push(column.title);
        }
        if ((column.type == "general-ratio") || (column.type == "set") || (column.type == "count")) {
            griddisplay.push(column.title);
            if ((column.type == "general-ratio") && nCCcheck) 
                ncumulativecounts.push(column.title);
            ;
        }
    }
    
    
    
    // series
    var totalcountcheck = 0;
    var passcheck = true;
    
    if (nCCcheck) {
        for (i = 0; data.series[i]; i++) {
            if (contains(ncumulativecounts, data.series[i].legend)) {
                series.push({
                    "grid": true,
                    "chart": true,
                    "formatter": smd.overview.formatNullToZero,
                    styles: "text-align: right;"
                });
                if (passcheck) {
                
                    totalcountcheck = i;
                    passcheck = false;
                }
            } else 
                series.push({
                    "grid": false,
                    "chart": false
                });
        }
        if (hasSplitBy) 
            series[totalcountcheck] = {
                "grid": true,
                "chart": false,
                "formatter": smd.overview.formatNullToZero,
                styles: "text-align: right;"
            };
        
    } // special case for normalized cumulative counts
 else 
        if (quantitytype.length > 0) 
        
            for (i = 0; data.series[i]; i++) {
                if (contains(quantitytype, data.series[i].legend)) {
                    series.push({
                        "grid": true,
                        "chart": true,
                        "formatter": smd.overview.formatNullToZero,
                        styles: "text-align: right;"
                    });
                    if (passcheck) {
                    
                        totalcountcheck = i;
                        passcheck = false;
                    }
                } else 
                    series.push({
                        "grid": false,
                        "chart": false
                    });
            }
        else 
            if (percentagetype.length > 0) 
            
                for (i = 0; data.series[i]; i++) {
                    if (contains(percentagetype, data.series[i].legend)) 
                        series.push({
                            "grid": true,
                            "chart": true,
                            "formatter": smd.overview.formatNullToZero,
                            styles: "text-align: right;"
                        });
                    else 
                        series.push({
                            "grid": false,
                            "chart": false
                        });
                }
            else 
                if (cumulativecounts.length > 0) 
                    for (i = 0; data.series[i]; i++) {
                        if (contains(cumulativecounts, data.series[i].legend)) 
                            series.push({
                                "grid": true,
                                "chart": true,
                                "formatter": smd.overview.formatNullToZero,
                                styles: "text-align: right;"
                            });
                        else 
                            series.push({
                                "grid": false,
                                "chart": false
                            });
                    }
                else 
                    if (regcounts.length > 0) {
                        for (i = 0; data.series[i]; i++) {
                            if (contains(regcounts, data.series[i].legend)) {
                                series.push({
                                    "grid": true,
                                    "chart": true,
                                    "formatter": smd.overview.formatNullToZero,
                                    styles: "text-align: right;"
                                });
                                if (passcheck) {
                                    totalcountcheck = i;
                                    passcheck = false;
                                }
                            } else 
                                series.push({
                                    "grid": false,
                                    "chart": false
                                });
                            
                        }
                        if ((regcounts.length > 1) && (!nototal)) 
                            series[totalcountcheck] = {
                                "grid": true,
                                "chart": false,
                                "formatter": smd.overview.formatNullToZero,
                                styles: "text-align: right;"
                            };
                    }
    
    if (data.metadata.name.match("^php") == "php") 
        series[totalcountcheck] = {
            "grid": true,
            "chart": false,
            "formatter": smd.overview.formatNullToZero,
            styles: "text-align: right;"
        };
    
    if (data.metadata.name == "pcl_t" && nCCcheck) {
        series[totalcountcheck] = {
            "grid": true,
            "chart": false,
            "formatter": smd.overview.formatNullToZero,
            styles: "text-align: right;"
        };
    }
    
    var chartcolumns = 0;
    if (griddisplay.length > 0) 
        for (i = 0; data.series[i]; i++) {
            if (contains(griddisplay, data.series[i].legend)) 
                series[i].grid = true;
            
            if (series[i].chart == true) 
                chartcolumns++;
            
            // Special case for Classified PMR cumulative trend by customer activity
            // normalized by number of unique customers
            // There are so many columns in this table we need to trim off a bunch for
            // the widget
            if (nCCcheck && data.metadata.name == "psf_t") {
                if (data.series[i].legend.indexOf("(normalized)") < 0 && data.series[i].legend.indexOf("Classified") < 0) 
                    series[i].grid = false;
            }
            
            // Special case for PMR closed split by ICA, IPLA usage, warranty
            if ((data.metadata.name.match("^pmc") == "pmc") && (IIWcheck)) {
            
                if (data.metadata.name == "pmc_t") {
                    if ((data.series.length - 5 > i) || i == data.series.length - 1) 
                        series[i].chart = false;
                    else 
                        series[i].chart = true;
                } else {
                    if (data.series.length - 4 > i) 
                        series[i].chart = false;
                    else 
                        series[i].chart = true;
                }
            }
            
            if (series[i].grid == true) {
                series[i].formatter = smd.overview.formatNullToZero;
                series[i].styles = "text-align: right;";
            }
            
        }
}
</script>
</head>
<body class="tundra">

  <div id="main" class="container">

    <div id="titlePanel" dojoType="dijit.TitlePane" title="Panel" style="">
      <div id="resizablePanel" style="position:relative; padding: 10px; border:1px solid black;">

        <!-- Content -->
        <div class="content">
          <div id="datapresentation" style="width: 100%;">
            <!-- title -->
            <div style="text-align: center;">
              <h2 id="title_div" style="margin-bottom: 0;"></h2>
            </div>

            <!-- chart -->
            <div id="chart_div"></div>

            <!-- legend -->
            <div id="legend_div"></div>

            <!-- grid -->
            <div id="grid_div"></div>

            <!-- metadata -->
            <div id="metadata_div"></div>

            <!-- footer -->
            <div style="text-align: center;">
              <div id="footer_div" class="smallTextCentered confidential"></div>
            </div>
          </div>
        </div>

        <!-- Resize Handle -->
        <div id="resizeHandle" dojoType="dojox.layout.ResizeHandle" targetId="resizablePanel"></div>
      </div>
    </div>

    <!-- Button Panel -->
    <div dojoType="dojo.dnd.Moveable">
      <div id="buttonPanel" dojoType="dijit.TitlePane" title="Button Panel" style="">
        <select id="selector" dojoType="dijit.form.FilteringSelect">
            <option value="aoc_t">APAR OCI trend</option>
            <option value="afs_t">TFSA receipts & backlog trend</option>
            <option value="ado_t">APAR fix defects OCI trend</option>
            <option value="poc_t">PMR OCI trend</option>
            <option value="pop_t">PMRs opened trend</option>
            <option value="prb_t">PMR receipts & backlog trend</option>
            <option value="pes_t">eSupport PMR receipts & backlog percentage trend</option>
            <option value="pcc_n">PMRs impacting consumability by criterion</option>
            <option value="uia_c">ICAR</option>
            <option value="nci_i">CI 105</option>
            <option value="ptd_n">Top customer drivers (issues)</option>
            <option value="sga_t">Trailer call survey satisfaction trend</option>
            <option value="ioc_t">Situation OCI trend</option>
            <option value="irb_t">Situation receipts & backlog trend</option>
            <option value="psf_t">Classified PMR cumulative trend by customer activity</option>
            <option value="psf_n">Classified PMRs by customer activity and situation</option>
            <option value="xot_t">OneTeam Scorecard</option>
        </select>
        <input id="spinner" dojoType="dijit.form.NumberSpinner" name="minval" value="1000" smallDelta="100" constraints="{min:0,max:10000,places:0}" intermediateChanges="true" />
        <div dojoType="dijit.form.Button" onClick="refreshDP();">Refresh</div>
      </div>
    </div>
  </div>

  <!-- Debug Panel -->
  <div id="debugPanel" dojoType="dojox.layout.FloatingPane" title="Console" resizable="true" dockable="true" style="position: absolute; bottom: 20px; right: 20px; width: 500px; height: 150px;">
    <pre id="debugPanelContent"></pre>
  </div>
</body>
</html>
